<template>
  <div id="footer_container">
    <div class="footer">
      <ul class="header">
        <li class="item">关于我们</li>
        <li class="item">用户隐私权政策</li>
        <li class="item">用户服务协议</li>
        <li class="item">联系我们</li>
      </ul>
      <address class="contact_info">
        <div class="wechat icon_box "><img src="https://rs.dance365.com/img/weChat_normal.a1769059.svg"></div>
        <div class="phone icon_box "><img src="https://rs.dance365.com/img/phone_normal.86835eeb.svg"></div>
      </address>
      <p class="info">Copyright © 2010-2022 南京爱一格网络科技有限公司 版权所有</p>
      <p class="info">经营性许可证编号： 苏B2-20180515  <img src="https://rs.dance365.com/jinying.png">苏网文〔2021〕4647-106号 </p>
      <p class="info"><img src="https://rs.dance365.com/pc/gongan.png" alt="">苏ICP备20036081号</p>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Footer',
}
</script>
<script lang="ts" setup>
</script>

<style scoped lang="scss">
#footer_container{
  margin-top: -50px;
  .footer{
    width: 100vw;
    height: 250px;
    background-color:rgb(34, 31, 35);
    color: white;
    .header{
      list-style: none;
      display: flex;
      justify-content: space-around;
      .item{
        text-align: center;
        width: calc(25% - 4px);
        padding: 20px;
      }
      .item:nth-of-type(2){
        border-left: 1px solid #b1b5c1;
        border-right: 1px solid #b1b5c1;
      }
      .item:nth-of-type(3){
        border-right: 1px solid #b1b5c1;
      }
    }
    .contact_info{
      display: flex;
      width: 130px;
      height: 24px;
      justify-content: space-between;
      margin: 28px auto 30px;
      img{
        width: 30px;
      }
    }
    .info{
      text-align: center;
      margin: 14px 0;
      img{
        width: 25px;
        height: 25px;
        position: relative;
      }
    }
  }
}

</style>
